<template>
    <!-- 关于我们 -->
    <div class="invitationCodeBox">
        <x-header :left-options="{showBack: true,backText:'邀请码'}" class="headerBox"></x-header>
        <div ref="contentBox" class="contentBox">
            <img src="../assets/images/invitation01.png" class="invitationBg"/>
            <div class="rule" @click="ruleShow = true">活动规则</div>
            <div class="contentBg">
                <img src="../assets/images/invitation02.png" class="contentBorder"/>
                <div class="contTxts">
                    <div class="contTxt" v-for="(item,index) in contTxts" :key>
                        <img src="../assets/images/invitation06.png" class="invitation06"/>
                        <span>{{item.contTxt}}</span>
                    </div>
                    <div class="txtTitle">高级会员更享：</div>
                    <div class="contTxt" v-for="(item,index) in contTxts" :key>
                        <img src="../assets/images/invitation06.png" class="invitation06"/>
                        <span>{{item.contTxt}}</span>
                    </div>
                </div>
                <img src="../assets/images/invitation04.png" class="invitation04"/>
                <div id="qrcode" class="qrcodeBox"></div>
                <div class="inviteCode">
                    专属邀请码：
                    <span>{{userInfo.inviteCode}}</span>
                </div>
                <router-link to="invitationLog" class="logBox">
                    <span>邀请记录</span>
                </router-link>
            </div>

            <div class="inviteBtn" @click="shareShow=true">一键邀请</div>
        </div>
        <!-- 活动规则 -->
        <x-dialog
                v-model="ruleShow"
                hide-on-blur
                class="dialogBox"
                :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}"
        >
            <!-- 活动规则 -->
            <div class="ruleBox">
                <div class="rules">
                    <div class="ruleTitle">
                        <img src="../assets/images/rule03.png"/>
                        <span>活动规则</span>
                    </div>
                    <div class="smTitle">活动时间</div>
                    <div class="ruleTime">{{ruleTime}}</div>
                    <div class="smTitle">活动详情</div>
                    <template v-for="(item,index) in activityDetails">
                        <div class="detailsTxt" :key="index">{{item.detailsTxt}}</div>
                    </template>
                </div>
                <div class="close" @click="ruleShow=false">
                    <img src="../assets/images/false11.png"/>
                </div>
            </div>
        </x-dialog>
        <!-- 分享弹框 -->
        <popup v-model="shareShow">
            <div class="drawer_attr_box">
                <div class="modalTitle">邀请好友你将获得50.0元奖励，好友将获得50.0元优惠</div>
                <div class="flex_sa">
                    <div class="invites">
                        <img src="../assets/images/wechartlogo02.png"/>
                        <div>微信好友</div>
                    </div>
                    <div class="invites">
                        <img src="../assets/images/friendsLogo.png"/>
                        <div>朋友圈</div>
                    </div>
                </div>
            </div>
        </popup>
    </div>
</template>

<script>
    import {XHeader, XDialog, Popup} from "vux";
    import QRcode from 'qrcodejs2';
    import {userInfo} from '@/api/index/index';
    import store from '../store/store'

    export default {
        components: {
            XHeader, XDialog, Popup,
        },
        data() {
            return {
                contTxts: [
                    {
                        contTxt: '内容内容内容内容内容'
                    },
                    {
                        contTxt: '内容内容内容内容内容'
                    },
                    {
                        contTxt: '内容内容内容内容内容'
                    },
                    {
                        contTxt: '内容内容内容内容内容'
                    }
                ],
                ruleShow: false,
                ruleTime: '2018.11.17 ~ 2018.12.17',
                activityDetails: [
                    {
                        detailsTxt: '1、本次秒杀活动为新用户专享。'
                    },
                    {
                        detailsTxt: '2、活动期间使用任何舞弊行为的用户，一经发现，立即取消秒杀活动资格。'
                    },
                    {
                        detailsTxt: '3、活动期间使用任何舞弊行为的用户，一经发现，立即取消秒杀活动资格。'
                    }
                ],
                shareShow: false,
                contTxts: [
                    {
                        contTxt: '内容内容内容内容内容'
                    },
                    {
                        contTxt: '内容内容内容内容内容'
                    },
                    {
                        contTxt: '内容内容内容内容内容'
                    },
                    {
                        contTxt: '内容内容内容内容内容'
                    }
                ],
              userInfo:'',
              userId:'',

            }
        },
        mounted() {
            this.getWindowHight();
            this.qrcode();
            userInfo(this.$store.state.user.id).then(res => {
                console.log(res.data.data);
                this.userInfo = res.data.data.userInfo;
                this.userId = res.data.data.userInfo.id;
            }).catch(err => {
                console.log(err)
            });
        },
        methods: {
            qrcode() {
                let qrcode = new QRcode('qrcode', {
                    width: 100,
                    height: 100, // 高度
                    text: 'welcome my Code demo', // 二维码内容
                    // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
                    colorDark: "#fff",
                    colorLight: "#3772f1",
                })
                console.log(qrcode)
            },
            getWindowHight() {
                let Xheight = window.screen.height - 40
                console.log(Xheight);
                this.$nextTick(() => {
                    this.$refs.contentBox.style.height = Xheight + 'px'
                })
            }
        },
    }
</script>

<style lang="less" scoped>
    .invitationCodeBox {
        // 头部导航
        /deep/ .headerBox {
            background-color: #fff;
            border-bottom: 1px solid #eee;

            .vux-header-left {
                left: 24px;

                .vux-header-back {
                    color: #000;
                }

                .left-arrow:before {
                    border-color: #000;
                }
            }
        }

        // 邀请码内容
        .contentBox {
            padding-bottom: 100px;
            position: relative;
            /* 内容样式 */

            .invitationBg {
                position: absolute;
                top: 0px;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                z-index: -9;
            }

            .rule {
                position: absolute;
                right: 0;
                top: 50px;
                background: #fff;
                font-size: 24px;
                padding: 6px 8px 6px 20px;
                border-top-left-radius: 30px;
                border-bottom-left-radius: 30px;
            }

            .contentBg {
                background: #73a1ff;
                // margin: 120px 50px 0;
                border-radius: 20px;
                padding: 30px 50px;
                // position: relative;
                position: absolute;
                top: 10%;
                left: 40px;
                right: 40px;
            }

            .contentBorder {
                width: 474px;
                height: 500px;
                margin: 0 auto;
                display: block;
            }

            .contTxts {
                position: absolute;
                top: 180px;
                left: 140px;
                color: #fff;
            }

            .contTxts {
                line-height: 1;
            }

            .contTxt span {
                font-size: 22px;
                margin-left: 10px;
            }

            .invitation06 {
                width: 12px;
                height: 12px;
            }

            .invitation04 {
                width: 476px;
                height: 57px;
                margin: 0 auto;
                display: block;
                margin-top: 30px;
            }

            .qrcodeBox {
                width: 226px;
                height: 226px;
                margin: 0 auto;
                display: block;
                margin-top: 30px;
            }

            .txtTitle {
                font-size: 24px;
                margin: 20px 0;
            }

            .inviteCode {
                text-align: center;
                color: #fff;
                font-size: 34px;
                margin-top: 30px;
            }

            .inviteCode span {
                font-size: 30px;
                background: #3772f1;
                padding: 5px 10px;
            }

            .logBox {
                display: block;
                color: #fff;
                text-align: center;
                margin-top: 40px;
                font-size: 34px;
                // text-decoration: underline;
                position: absolute;
                bottom: -8%;
                left: 0;
                right: 0;
            }

            .inviteBtn {
                color: #fff;
                text-align: center;
                background: #cda25e;
                line-height: 2.5;
                font-size: 36px;
                margin-top: 0px;
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
            }
        }

        // 活动规则
        /deep/ .dialogBox {
            max-width: 100%;
            width: 100%;
            height: 50%;
            background-color: transparent;

            .ruleBox {
                border-radius: 20px;
                margin: 0 50px;

                .rules {
                    background: #fff;
                    border-radius: 20px;
                    padding: 40px 30px;
                    overflow: hidden;
                    border: 20px solid #c84036;
                }

                .ruleTitle {
                    text-align: center;
                    position: relative;
                }

                .ruleTitle img {
                    width: 286px;
                    height: 61px;
                }

                .ruleTitle span {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    color: #fff;
                    font-size: 36px;
                }

                .smTitle {
                    background: linear-gradient(to right, #e56a45, #c63d35);
                    color: #fff;
                    display: inline-block;
                    font-size: 24px;
                    padding: 10px 20px;
                    border-radius: 30px;
                    margin: 20px;
                }

                .ruleTime {
                    font-size: 26px;
                    margin: 10px 0;
                }

                .detailsTxt {
                    font-size: 24px;
                    line-height: 2;
                }

                .close {
                    margin-top: 40px;
                }

                .close img {
                    width: 60px;
                    height: 60px;
                }

                /* 一键邀请弹窗 */

                .drawer_screen {
                    width: 100%;
                    height: 100%;
                    position: fixed;
                    top: 0;
                    left: 0;
                    background: #000;
                    opacity: 0.5;
                    overflow: hidden;
                    z-index: 98;
                    color: #fff;
                }

                .drawer_attr_box {
                    width: 100%;
                    overflow: hidden;
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    z-index: 99;
                    background: #fff;
                    text-align: center;
                    padding: 50px 0;
                }

                .modalTitle {
                    font-size: 30px;
                    width: 550px;
                    margin: 20px auto;
                }

                .invites img {
                    width: 80px;
                    height: 80px;
                }

                .invites div {
                    font-size: 24px;
                    margin-top: 20px;
                }
            }
        }

        // 分享邀请
        .drawer_attr_box {
            width: 100%;
            overflow: hidden;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 99;
            background: #fff;
            text-align: center;
            padding: 50px 0;

            .modalTitle {
                font-size: 30px;
                width: 550px;
                margin: 0px auto;
            }

            .invites {
                margin-top: 30px;

                div {
                    font-size: 24px;
                    margin-top: 20px;
                }

                img {
                    width: 80px;
                    height: 80px;
                }
            }
        }
    }
</style>